<template>
	<view class="preview-area">
		<j-tabs :tabs="tabs" @change="tabsChange" :controlIndex="currentIndex"></j-tabs>
		<!-- 本课预习 -->
		<view v-if="currentIndex == 0" class="current-preview">
			<view class="title">
				<span class="title-text">{{viewData.title}}</span>
				<span class="author">{{viewData.authorName}}</span>
			</view>
			<view class="view-content" v-if="viewData">
				<view v-for="(item, index) in viewData.items" :key="index" class="cards-list">
					<!-- 1：文字 -->
					<view v-if="item.essayItemType == 1" class="card">
						<view class="text">
							<rich-text :nodes="item.text"></rich-text>
						</view>
					</view>
					<!-- 2：图片 -->
					<view v-else-if="item.essayItemType == 2" class="card">
						<image :src="item.imageSrc" mode="widthFix" class="view-image"></image>
						<view class="text">
							<rich-text :nodes="item.text"></rich-text>
						</view>
					</view>
					<!-- 3：音频 -->
					<view v-else-if="item.essayItemType == 3" class="card">
						<imt-audio 
							:src="item.audioSrc" 
							:duration="item.duration" 
							:autoplay="false" 
							:control="false"
							class="audio-item">
						</imt-audio>
						<view class="text">
							<rich-text :nodes="item.text"></rich-text>
						</view>
					</view>
					<!-- 4: 视频 -->
					<view v-else-if="item.essayItemType == 4" class="card">
						<view class="media-border">
							<video :src="item.videoSrc" class="media-item"></video>
						</view>
						<view class="text">
							<rich-text :nodes="item.text"></rich-text>
						</view>
					</view>
				</view>
				<view v-if="viewData.items" class="option-area">
					<view class="option-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="setPreview">已预习</view>
				</view>
			</view>
		</view>
		<!-- 往期预习 -->
		<view v-if="currentIndex == 1" class="list-area">
			<view v-for="(item, index) in list" :key="index" class="card" @click="goCurrentPreview(item)">
				<view class="course-name">{{item.subTitle}}</view>
				<view 
				class="course-status" 
				:style="{background: getStatus(item.isPreview)}"
				>
					<span v-if="item.isPreview">已预习</span><span v-else>预习</span>
				</view>
			</view>
		</view>
		<!-- 默认提示 -->
		<view v-if="showBottom && currentIndex == 1" class="none-info">
			--再找也没有了~~--
		</view>
	</view>
</template>

<script>
	import jTabs from '@/components/tui-tabs/j-tabs.vue'
	import imtAudio from '@/components/imt-audio/imt-audio.vue'
	export default{
		name: 'previewList',
		components:{ jTabs, imtAudio },
		data(){
			return{
				theme: this.$theme,
				id: '',
				classId: '',
				list: [],
				//tabs栏配置项目
				tabs:{
					defaultIndex: 0,
					width: '100%',
					height: '6vh',
					list:[
						{selectedIndex: 0, text: '本课预习'},
						{selectedIndex: 1, text: '往期预习'}
					]
				},
				currentIndex: 0,
				previewData: {},
				viewData: {},
				showBottom: false
			}
		},
		computed:{
			getStatus: function(){
				return function(status){
					if(status){
						return this.theme.info
					}else{
						return `linear-gradient(10deg, ${this.theme.primary} 30%, ${this.theme.primaryLight}, ${this.theme.primary} 70%)`
					}
				}
			}
		},
		watch:{
			currentIndex(e){
				switch(e){
					case 0:
						this.getCurrentPreview(this.id)
						break
					case 1:
						this.getPreViewList(0, 20).then(resp=>{
							this.list = resp.result
						})
						break
				}
			},
			list:{
				deep:true,
				handler(e){
					if(e.length == 0){
						this.showBottom = true
					}else{
						this.showBottom = false
					}
				}
			}
		},
		onLoad(e){
			this.id = e.Id
			this.classId = e.classId
			uni.setNavigationBarTitle({
				title: e.courseName
			})
			this.getCurrentPreview(this.id)
		},
		//下拉刷新
		onPullDownRefresh(){
			switch(this.currentIndex){
				//本科预习
				case 0:
					this.getCurrentPreview(this.id).then(()=>{
						uni.stopPullDownRefresh()
					})
					break
				//往期预习
				case 1:
					this.showBottom = false
					this.list = []
					setTimeout(()=>{
						this.getPreViewList(0, 20).then(resp=>{
							this.list = resp.result
						})
						uni.stopPullDownRefresh()
					}, 200)
		 			break
			}
		},
		//上划加载
		onReachBottom(){
			//往期预习存在上划加载
			if(this.currentIndex == 1){
				this.getPreViewList(this.list.length, 20).then(resp=>{
					this.list = [...this.list, ...resp.result]
				})
			}
		},
		methods:{
			//tabs栏项目变更
			tabsChange(selectedIndex){
				this.currentIndex = selectedIndex
			},
			//本科预习预览
			async getCurrentPreview(id){
				let essayId = ''
				await this.$http.request({
					url: 'api/Essay/CheckByMainId',
					method: 'GET',
					showLoading: true,
					data: {
						Id: id,
						EssayType: 1 //1：教学大纲
					}
				}).then(resp=>{
					essayId = resp.essayId					
				})
				// 存在大纲则跳转详情页
				if (essayId) {
					this.getViewData(essayId).then(resp=>{
						this.viewData = resp.result
					})
				}
				// 不存在则提示
				else {
					uni.showToast({
						title: '老师还没有提交教学大纲哦',
						icon: 'none',
						duration: 2000
					})
				}
				return new Promise((resolve, reject)=>{resolve()})
			},
			//拉取美篇数据
			getViewData(essayId){
				return this.$http.request({
					url: 'api/Essay/GetEssay',
					method: 'GET',
					showLoading: true,
					allow: true,
					data:{
						Id: essayId,
						EssayType: 1
					}
				})
			},
			//拉取往期预习数据
			getPreViewList(SkipCount, MaxResultCount){
				return this.$http.request({
					url: 'api/Essay/GetListWithPreview',
					method: 'GET',
					showLoading: true,
					allow: true,
					data:{
						ClassId: this.classId,
						SkipCount: SkipCount,
						MaxResultCount: MaxResultCount
					}
				})
			},
			//预习
			setPreview(){
				this.$http.request({
					url: 'api/LivePlayer/CreateChannelTimeTablePreview',
					method: 'PUT',
					showLoading: true,
					allow: true,
					data:{
						channelTimeTableId: this.id
					}
				}).then(()=>{
					uni.showToast({
						title: '已预习',
						icon: 'success',
						duration: 2000
					})
				})
			},
			//跳转本课预习
			goCurrentPreview(e){
				this.id = e.mainId
				this.currentIndex = 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	rich-text{
		font-size: 40rpx;
		letter-spacing: 2rpx;
		text-indent: 80rpx;
		line-height: 80rpx;
	}
	.preview-area{
		width: 100vw;
		min-height: 100vh;
		animation: 0.5s show;
		background-color: #f1f1f1;
		.current-preview{
			.title{
				width: 100%;
				min-height: 100rpx;
				font-size: 40rpx;
				margin: 30rpx 0 30rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.title-text{
					padding: 10rpx 30rpx 10rpx 30rpx;
				}
				.author{
					font-size: 30rpx;
					color: #434343;
					padding: 20rpx;
				}
			}
			.view-content{
				padding: 10rpx 0 10rpx 0;
				border-bottom: 1rpx solid #e7e7e7;
				.cards-list{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-direction: column;
					.card{
						display: flex;
						justify-content: center;
						align-items: flex-start;
						flex-direction: column;
						width: 90vw;
						height: auto;
						margin: 10rpx 0 50rpx 0;
						word-wrap: break-word;
						word-break: break-all;
						overflow-x: hidden;
						.media-border{
							width: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #000000;
							margin: 30rpx 0 10rpx 0;
						}
						.media-item{
							max-width: 90vw;
							height: 30vh;
						}
						.view-image{
							width: 90vw;
							margin: 30rpx 0 10rpx 0;
						}
						.audio-item{
							width: 100%;
							margin: 30rpx 0 10rpx 0;
						}
						.text{
							word-wrap: break-word;
							word-break: break-all;
							overflow-x: hidden;
						}
					}
				}
				.option-area{
					width: 100%;
					height: 10vh;
					display: flex;
					justify-content: center;
					align-items: center;
					.option-button{
						padding: 10rpx 50rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
		}
		
		.list-area{
			width: 100%;
			padding: 10rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			.card:active{
				background-color: #dddddd;
			}
			.card{
				width: 90vw;
				min-height: 10vh;
				height: auto;
				transition: 0.3s;
				margin: 20rpx 0;
				background-color: #fff;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.course-name{
					padding: 2vw;
					width: 66vw;
					min-height: 10vh;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #414141;
				}
				.course-status{
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 20vw;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.none-info{
			width: 100vw;
			height: 10vh;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: inset 0 5rpx 10rpx #f0f0f0;
			color: #747474;
			font-size: 28rpx;
		}
	}
</style>
